<template>
  <el-dialog v-model="store.state.filit.navBool" title="添加电影">
    <el-form :model="store.state.filit.addDity" :label-width="formLabelWidth">
      <el-form-item label="id" prop="id">
        <el-input v-model="addDity.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="电影名" prop="film">
        <el-input v-model="addDity.film" autocomplete="off" />
      </el-form-item>
      <el-form-item label="导演" :label-width="formLabelWidth">
        <el-input v-model="addDity.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="类型" :label-width="formLabelWidth">
        <el-input v-model="addDity.prices" autocomplete="off" />
      </el-form-item>
      <el-form-item label="时间" :label-width="formLabelWidth">
        <el-input v-model="addDity.time" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handelsubmit">取消</el-button>
        <el-button type="primary" @click="addubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance } from 'element-plus';
import { defineEmits, reactive, ref } from 'vue';
import { useStore } from 'vuex';
import http from '../util/api';

const store = useStore();

const formLabelWidth = '140px';
const ruleFormRef = ref<FormInstance>();
const addDity = reactive<any>({
  id: '',
  film: '',
  name: '',
  prices: '',
  time: '',
  tp: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.CSAoYvueTcrwNNQWGs1-5AHaKq?pid=ImgDet&w=1200&h=1727&rs=1',
});
const emit = defineEmits(['getlist']);
// 确认添加
const addubmit = (formEl: FormInstance | undefined) => {
  const data = {
    film: addDity.film,
    name: addDity.name,
    prices: addDity.prices,
    time: addDity.time,
    tp: addDity.tp,
    txt: '详情',
  };
  http('/movie/', 'POST', data).then((res: any) => {
    if (res.status === 201) {
      ElMessage({
        type: 'success',
        message: '添加成功！',
      });
      emit('getlist');
      Object.keys(addDity).map((item) => {
        delete addDity[item];
      });
    } else {
      ElMessage({
        type: 'error',
        message: '添加失败！',
      });
    }
    store.commit('SET_NAV');
  });
};
// 取消
const handelsubmit = () => {
  store.commit('SET_NAV');
  ElMessage({
    type: 'info',
    message: '已取消！',
  });
};

</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

/* .el-input {
         width: 300px;
       } */
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
